<template>
  <el-container>
    <el-table
        :data="orderDetail"
        stripe
        style="width: 100%">
      <el-table-column
          prop="productId"
          label="菜品id"
          width="180">
      </el-table-column>
      <el-table-column
          prop="productName"
          label="菜品名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="productType"
          label="菜品种类"
          width="180">
      </el-table-column>
      <el-table-column
          prop="productUrl"
          label="菜品图片"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.productUrl"
              fit="contain"
          ></el-image>
        </template>

      </el-table-column>
      <el-table-column
          prop="productPrice"
          label="菜品价格"
          width="180">
      </el-table-column>
      <el-table-column
          prop="quantity"
          label="数量"
          width="180">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="偏好">
        <template slot-scope="scope">{{ scope.row.remark ? scope.row.remark : "无" }}</template>
      </el-table-column>
    </el-table>
    <el-row>
      <el-button type="primary" @click="pay">支付</el-button>
    </el-row>

  </el-container>

</template>

<script>
import axios from "axios";
import {payOrder} from "@/API/UserAPI";
import message from "@/utils/message";
import {getOrderDetail} from "@/API/OrderAPI";

export default {
  name: "Payment",
  props: {
    order: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      orderId: "",
      orderDetail: [],
    };
  },
  mounted() {
    this.orderId = this.$route.params.orderId;
    console.log(this.orderId)
    this.getOrderDetail();
  },
  methods: {
    async getOrderDetail() {
      const result = await getOrderDetail(this.orderId);
      if (result.code === 1) {
        this.orderDetail = result.data;
      }
    },

    async pay() {
      const result = await payOrder({orderId: this.orderId})
      if (result.code === 1) {
        await this.$router.push({
          name: "PaySuccess",
        });
      }
    }
  }
};
</script>
<style scoped>
.el-container {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>